<template>
  <div>
    <div>
      <el-menu :default-active="activePath" class="el-menu-vertical-demo container-table101" @open="handleOpen"
        @close="handleClose">
        <el-menu-item :index="item.name" v-for="(item,i) in navList" :key="i" @click="getIndex(i)">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.navItem }}</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: ["appID"],
    data() {
      //这里存放数据
      return {
        navList: [],
        activePath: '/detailInfo', //绑定高亮
      };
    },
    //监听属性 类似于data概念
    computed: {


    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },

      // 获取当前页
      getIndex(index) {
        sessionStorage.setItem('setMenuIndex_application_detail', index)
        this.$emit('handleClick', index)
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      if (sessionStorage.getItem('setMenuIndex_application_detail') == 0) {
        this.activePath = '/detailInfo?appID=' + this.appID
      } else if (sessionStorage.getItem('setMenuIndex_application_detail') == 1) {
        this.activePath = '/setting?appID=' + this.appID
      } else if (sessionStorage.getItem('setMenuIndex_application_detail') == 2) {
        this.activePath = '/downList?appID=' + this.appID
      } else if (sessionStorage.getItem('setMenuIndex_application_detail') == 3) {
        this.activePath = '/signCom?appID=' + this.appID
      } else {
        this.activePath = '/detailInfo?appID=' + this.appID
      }

      this.navList = [{
          icon: "iconfont iconYYSZ_icon_Ad_selected",
          name: '/detailInfo?appID=' + this.appID,
          navItem: '应用详情'
        },
        {
          icon: "iconfont iconYYSZ_icon_Applicationsettings_selected",
          name: '/setting?appID=' + this.appID,
          navItem: '应用设置'
        },
        {
          icon: "iconfont iconYYSZ_icon_Downloaddetails_selected",
          name: '/downList?appID=' + this.appID,
          navItem: '下载明细'
        },
      ];
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
  }

</script>
<style scoped>
  /* 图标 */
  i {
    color: black;
  }

  i .is-active {
    color: #fff;
  }

  .el-menu-item.is-active {
    background-color: #FF7226;
    color: #fff;
  }

  .el-menu-item span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 500;
    line-height: 16px;
  }


  .el-menu-item.is-active:hover {
    background-color: #FF7226;
  }

  .el-menu-item:hover {
    outline: 0;
    background-color: #ffede3;
  }

  .app_name {
    display: flex;
    margin-left: 10px;
  }

  .name-text {
    margin-left: 10px;
  }

  .copy_link {
    display: flex;
    align-items: center;
  }

  body,
  html {
    height: 100%;
    font-family: sans-serif;
  }

  input {
    display: block;
    outline: none;
    border: none !important;
  }

  textarea {
    display: block;
    outline: none;
  }

  textarea:focus,
  input:focus {
    border-color: transparent !important;
  }

  button {
    outline: none !important;
    border: none;
    background: transparent;
  }

  button:hover {
    cursor: pointer;
  }

  iframe {
    border: none !important;
  }

  .content {
    margin: 30px 0px 30px 0px;
    background: #FFFFFF;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
  }

  .limiter {
    width: 100%;
    margin: 0 auto;
  }

  .container-table100 {
    width: 100%;
    /* min-height: 100vh; */
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .container-table101 {
    width: 100%;
    min-height: 100vh;
    border-radius: 4px 0px 0px 4px;
  }

  .wrap-table100 {
    width: 1170px;
  }

  table {
    border-spacing: 1;
    border-collapse: collapse;
    background: white;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  table * {
    position: relative;

  }

  table td,
  table th {
    padding-left: 8px;
  }

  table thead tr {
    height: 60px;
    border-bottom: 1px solid #E6E6E6;
  }

  table tbody tr {
    height: 100px;


  }

  table td,
  table th {
    text-align: center;
  }

  table td.l,
  table th.l {
    text-align: center;
  }

  table td.c,
  table th.c {
    text-align: center;
  }

  table td.r,
  table th.r {
    text-align: center;
  }

  .table100-head th {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 14px;
    font-weight: unset;
  }



  tbody tr {
    border-bottom: 1px solid #E6E6E6;
    /* border-left: 1px solid #E6E6E6; */
  }

  tbody tr {
    font-size: 15px;
    color: #808080;
    line-height: 1.2;
    font-weight: unset;
  }

  tbody tr:hover {
    color: #555555;
    background-color: #f5f5f5;
    cursor: pointer;
  }

  .column1 {
    width: 155px;
  }

  .column2 {
    width: 69px;
  }

  .column3 {
    width: 69px;
  }

  .column4 {
    width: 207px;
  }

  .column5 {
    width: 88px;
  }

  .column6 {
    width: 88px;
  }

  .orderHeader {
    display: flex;
    justify-content: space-between;
    height: 80px;
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    /* border-left: 1px solid #E6E6E6; */
  }

  .flexJustifyStart {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .block>>>.el-date-editor .el-range__icon {
    margin-left: -5px !important;
    line-height: 18px !important;
  }

  .orderHeader>>>.el-form-item__content {
    line-height: 40px !important;
  }

  .flexAlginCenter {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }

  .orderBody {
    height: 550px;
  }

  div>>>.el-card {
    border: none;
  }

  div>>>.el-progress-bar {
    width: 260px;
    margin-top: 8px;
    margin-left: 20px;
  }

  /* 按钮 */
  .buy {
    background: -webkit-linear-gradient(-135deg, #ff9d68, #ff7226);
    background: -o-linear-gradient(-135deg, #ff9d68, #ff7226);
    background: -moz-linear-gradient(-135deg, #ff9d68, #ff7226);
    background: linear-gradient(-135deg, #ff9d68, #ff7226);
    color: #fff;
    font-size: 16px;
  }

  div>>>.el-dropdown {
    border: 1px solid #dcdfe6 !important;
    border-radius: 4px;
    text-align: center;
  }

  div>>>.el-input-group__append {
    background-color: transparent;
    color: #000;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    padding: 0 20px;
    white-space: nowrap;
    font-size: 16px;
  }

  div>>>.el-card__body {
    padding: 0px;
    text-align: center;
    /* overflow: auto; */
  }

  div>>>.el-card.is-always-shadow {
    box-shadow: none;
  }

  div>>>.cell {
    text-align: center;
  }

  div>>>.el-button--text {
    color: #ff7226;
  }

  div>>>.el-table__body-wrapper {
    overflow-x: auto;
  }

  div>>>.el-input-group {
    width: 220px;
  }

  .wire {
    color: #ff7226;
  }

  /* 云币余额 限制 */
  .right_box {
    display: flex;
  }

  .upload_limit {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-right: 20px;
  }

  .allSize_Box {
    display: flex;
    flex-direction: column;
  }

  .allSize_Box_data {
    display: flex;
  }

  .allSize_Box_data_c {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .allSize_Box_data_d {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 10px;
  }

  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;
  }

  .intel {
    position: absolute;
    top: 55px;
    left: 666px;
  }

  .circle1 {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #ff7226;
  }

  div>>>.el-progress-bar__inner {
    background-color: #ff7226;
  }

  div>>>.el-progress-bar__outer {
    background-color: #ffdbc7;
  }

  .cell span {
    width: 1px;
    /*根据自己项目进行定义宽度*/
    overflow: hidden;
    /*设置超出的部分进行影藏*/
    text-overflow: ellipsis;
    /*设置超出部分使用省略号*/
    white-space: nowrap;
    /*设置为单行*/
  }

  .box1 {
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* border-right: 1px solid #E0E0E0; */
  }

  .box1:first-child {
    border-right: 1px solid #e0e0e0;
  }

  .box2 {
    margin: 0px 20px;
  }

  /* 媒体查询 */
  @media (max-width: 1199px) {
    .info {
      display: none;
    }

    .container-table101 {
      min-height: 0vh;
    }
  }

  @media screen and (max-width: 992px) {

    .container-table101 {
      min-height: 0vh;
    }

    table {
      display: block;
    }

    table>*,
    table tr,
    table td,
    table th {
      display: block;
    }

    table thead {
      display: none;
    }

    table tbody tr {
      height: auto;
      padding: 37px 0;
    }

    table tbody tr td {
      padding-left: 36% !important;
      margin-bottom: 24px;
    }

    table tbody tr td:last-child {
      margin-bottom: 0;
    }

    table tbody tr td:before {
      font-size: 14px;
      color: #999999;
      line-height: 1.2;
      font-weight: unset;
      position: absolute;
      width: 40%;
      left: 30px;
      top: 0;
    }

    table tbody tr td:nth-child(1):before {
      content: "名称";
    }

    table tbody tr td:nth-child(2):before {
      content: "大小";
    }

    table tbody tr td:nth-child(3):before {
      content: "下载量";
    }

    table tbody tr td:nth-child(4):before {
      content: "下载链接";
    }

    table tbody tr td:nth-child(5):before {
      content: "CDN加速器";
    }

    table tbody tr td:nth-child(6):before {
      content: "状态";
    }

    table tbody tr td:nth-child(7):before {
      content: "操作";
      display: flex;

      align-items: center;
    }

    .column1,
    .column2,
    .column3,
    .column4,
    .column5,
    .column6,
    .column7 {
      text-align: left;
    }

    .column4,
    .column5,
    .column6,
    .column1,
    .column2,
    .column3 {
      width: 100%;
    }

    tbody tr {
      font-size: 14px;
    }

    .container-table101 {
      min-height: 0vh;
    }

    div>>>.copy_button {
      margin-top: -10px;
      margin-left: 10px;
    }

    div>>>.link_button {
      margin-top: -10px;
      margin-left: -20px;
    }

    .app_name {
      margin-left: 0px;

    }
  }

  @media (max-width: 768px) {
    .buy {}
  }

  @media (max-width: 576px) {

    .container-table101 {
      min-height: 0vh;
    }

    .orderHeader {
      border-left: none !important;
    }

    thead tr {
      border-left: none;
    }

    tbody tr {
      border-left: none;
    }

    div>>>.copy_button {
      margin-top: -10px;
      margin-left: 10px;
    }

    div>>>.link_button {
      margin-top: -10px;
      margin-left: -20px;
    }

    .column7 .el-button {
      margin-top: -8px;
    }

    .app_name {
      margin-left: 0px;

    }

  }

  .appurl img {
    width: 48px;
    height: 48px;
  }

  div>>>.link_button:hover {
    background-color: transparent;
  }

  .el-menu-vertical-demo.container-table101.el-menu {
    background-color: rgba(30, 30, 30, 0.8);
    border-right: 1px solid #272727;
  }


  .el-menu-vertical-demo.container-table101.el-menu .el-menu-item i.iconfont {
    color: #fff;
  }

  .el-menu-vertical-demo.container-table101.el-menu .el-menu-item:hover {
    background-color: #ccc;
  }

  .el-menu-vertical-demo.container-table101.el-menu .el-menu-item span {
    color: #fff;
  }

</style>
